<template>
    <div :class="cns">
        <ph-button v-stv="active" class="ph-hover-striped-v" :block="true" :icon="icon" type='transparent' @click="onAction"><slot>{{title}}</slot></ph-button>
    </div>
</template>
<script lang="ts">
import { computed, defineComponent, inject, Ref, watch } from 'vue'
import {PhButton} from '../base'
import { PhScrollToView } from '../../directives'
import { TreeNode } from './struct'
export default defineComponent({
    name:"MenuItem",
    directives:{
        stv:PhScrollToView
    },
    components:{
        PhButton
    },
    props:{
		title:{type:String},
		icon:{type:String},
		action:{type:String}
    },
    setup(props,{slots}){
        const notify = inject<(a:string,b:Array<unknown>)=>void>('notifyRootMenu')
        const current = inject<Ref<string>>("current");
        const getParentMenu = inject('getParentMenu') as ()=>TreeNode[]
        const expandParent = inject('expandParent') as ()=>void
        const active = computed(()=>{
            return current&&current.value==props.action
        })
        const cns = computed(()=>{
            return {
                'ph-menu-item':true,
                'ph-menu-item-leaf':true,
                'ph-menu-item-active':active.value
            }
        })
        const node = computed(()=>{
            return {
                title:props.title||(slots as any).default()[0]?.children,
                icon:props.icon,
                action:props.icon
            }
        })
        const onAction = ()=>{
			notify&&notify(props.action as string,[...getParentMenu(),node.value])
        }
        watch(()=>active.value,(v)=>{
            if(v)expandParent()
        })
        return {
                cns,
                onAction,
                active
                }
    }
})
</script>
